$(function () {
    $.getJSON("allCost", function (result) {
        console.log(result);
        $("#costcount").text("近七天总消费:" + (result["sncount"] + result["smcount"] ) + "元 / 普通客户总消费:" + result["sncount"] + "元 / 会员总消费:" + result["smcount"] + "元 (绿:普通客户 蓝:会员)");

        $("#scale").text("总消费占比 - 普通客户:" + ((result["ncount"] / (result["mcount"] + result["ncount"])).toPrecision(2) * 100) + "%" + " / 会员:" + ((result["mcount"] / (result["mcount"] + result["ncount"])).toPrecision(2) * 100) + "%");
        $("#PathYear").text("近半年总消费:" + result["pathCount"] + "元 / 普通客户总消费:" + result["ncount"] + "元 / 会员总消费:" + result["mcount"] + "元 (绿:普通客户 蓝:会员)");
        var ctx, data, myLineChart, options;
        Chart.defaults.global.responsive = true;
        ctx = $('#line-chart').get(0).getContext('2d');
        options = {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            bezierCurve: false,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        data = {
            labels: ['今天', '昨天', '前天', '两天前', '三天前', '四天前', '五天前'],
            datasets: [
                {
                    label: "普通客户",
                    fillColor: "rgba(26, 188, 156,0.2)",
                    strokeColor: "#1ABC9C",
                    pointColor: "#1ABC9C",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#1ABC9C",
                    data: result["nseven"]
                }, {
                    label: "会员",
                    fillColor: "rgba(34, 167, 240,0.2)",
                    strokeColor: "#22A7F0",
                    pointColor: "#22A7F0",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#22A7F0",
                    data: result["mseven"]
                }
            ]
        };
        myLineChart = new Chart(ctx).Line(data, options);

        var ctx, data, myBarChart, option_bars;
        Chart.defaults.global.responsive = true;
        ctx = $('#bar-chart').get(0).getContext('2d');
        option_bars = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: false,
            barShowStroke: true,
            barStrokeWidth: 1,
            barValueSpacing: 5,
            barDatasetSpacing: 3,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        data = {
            labels: ['今月', '上月', '前月', '前两月', '前三月', '前四月'],
            datasets: [
                {
                    label: "普通客户总消费",
                    fillColor: "rgba(26, 188, 156,0.6)",
                    strokeColor: "#1ABC9C",
                    pointColor: "#1ABC9C",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#1ABC9C",
                    data: result["nPathYear"]
                }, {
                    label: "会员总消费",
                    fillColor: "rgba(34, 167, 240,0.6)",
                    strokeColor: "#22A7F0",
                    pointColor: "#22A7F0",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#22A7F0",
                    data: result["mPathYear"]
                }
            ]
        };
        myBarChart = new Chart(ctx).Bar(data, option_bars);

        var ctx, data, myBarChart, option_bars;
        Chart.defaults.global.responsive = true;
        ctx = $('#radar-chart').get(0).getContext('2d');
        option_bars = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: false,
            barShowStroke: false,
            barStrokeWidth: 0,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        data = {
            labels: ['今月', '上月', '前月', '前两月', '前三月', '前四月'],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(26, 188, 156,0.2)",
                    strokeColor: "#1ABC9C",
                    pointColor: "#1ABC9C",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#1ABC9C",
                    data: result["monthlist"]
                }
                // , {
                //     label: "My Second dataset",
                //     fillColor: "rgba(34, 167, 240,0.2)",
                //     strokeColor: "#22A7F0",
                //     pointColor: "#22A7F0",
                //     pointStrokeColor: "#fff",
                //     pointHighlightFill: "#fff",
                //     pointHighlightStroke: "#22A7F0",
                //     data: result["monthlist"]
                // }
            ]
        };
        myBarChart = new Chart(ctx).Radar(data, option_bars);

        var ctx, data, myLineChart, options;
        Chart.defaults.global.responsive = true;
        ctx = $('#pie-chart').get(0).getContext('2d');
        options = {
            showScale: false,
            scaleShowGridLines: false,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 0,
            scaleShowHorizontalLines: false,
            scaleShowVerticalLines: false,
            bezierCurve: false,
            bezierCurveTension: 0.4,
            pointDot: false,
            pointDotRadius: 0,
            pointDotStrokeWidth: 2,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 4,
            datasetFill: true,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        data = [
            {
                value: result["mcount"],
                color: "#FA2A00",
                highlight: "#FA2A00",
                label: "会员总消费(单位/元)"
            }, {
                value: result["ncount"],
                color: "#1ABC9C",
                highlight: "#1ABC9C",
                label: "普通客户总消费(单位/元)"
            },
            // {
            //     value: 100,
            //     color: "#FABE28",
            //     highlight: "#FABE28",
            //     label: "Yellow"
            // }
        ];
        myLineChart = new Chart(ctx).Pie(data, options);

    })
});